<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2025-01-29 02:47:28
-->
<template>
  <h4>指令简写</h4>
  <hr />
  <p>v-bind 指令用于绑定 HTML attribute。它可以缩写为"<span style="color: red">:</span>"</p>
  <p>v-bind:id="dynamicId" 绑定 id 属性值为 dynamicId。</p>
  <p>它可以简写为 :id="dynamicId"。</p>
  <p>完整写法：</p>
  <pre><code class="html" v-html="highlighted1"></code></pre>
  <p>简写写法：</p>
  <pre><code class="html" v-html="highlighted2"></code></pre>
  <p>实际效果：</p>
  <p :id="dynamicId">{{ abbreviation2 }}</p>
  <button @click="changeColor">change color</button>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import html from 'highlight.js/lib/languages/xml'
import javascript from 'highlight.js/lib/languages/javascript'

hljs.registerLanguage('html', html)
hljs.registerLanguage('javascript', javascript)

const rawCode1 = `<div v-bind:id="dynamicId">innerText</div&gt;`
const highlighted1 = ref(
  hljs
    .highlight('html', rawCode1)
    .value.replace(/&amp;lt;/g, '&lt;')
    .replace(/&amp;gt;/g, '&gt;'),
)

const rawCode2 = `<div :id="dynamicId">innerText</div>`
const highlighted2 = ref(
  hljs
    .highlight('html', rawCode2)
    .value.replace(/&amp;lt;/g, '&lt;')
    .replace(/&amp;gt;/g, '&gt;'),
)

const abbreviation2 = ref('<div :id="dynamicId">innerText</div>')
const dynamicId = ref('blue')

const changeColor = () => {
  dynamicId.value = dynamicId.value === 'blue' ? 'red' : 'blue'
}
</script>

<style scoped>
#blue {
  color: blue;
}

#red {
  color: red;
}

#green {
  color: green;
}

.bold {
  font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
#numInput[type='number']::-webkit-outer-spin-button,
#numInput[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

p {
  font-size: 16px;
  padding: 2px;
  margin: 5px 0;
}

/* 设置预格式化文本的样式 */
pre {
  /* 背景色 */
  background-color: #f1ffed;
  /* 边框 */
  border: 1px solid #ccc;
  /* 缩小内边距 */
  padding: 5px 5px 5px 10px;
  /* 允许滚动 */
  overflow: auto;
  /* 可选：设置上下外边距 */
  margin: 0px 0;
  /* 允许换行 */
  /* normal: 连续的空白字符会被合并为一个空格。文本会在允许的断点处自动换行。
     nowrap：连续的空白字符会被合并为一个空格。文本不会自动换行，即使在允许的断点处也不会换行。
     pre：保留所有的空白字符（包括空格、制表符和换行符）。文本只会在遇到换行符或者 <br> 标签时换行。
     pre-wrap：保留所有的空白字符。文本会在遇到换行符、<br> 标签，或者达到容器边界时换行。
     pre-line：合并连续的空白字符为一个空格，但保留换行符。文本会在遇到换行符、<br> 标签，或者达到容器边界时换行。
   */
  white-space: pre-wrap;
  /* 行高 */
  line-height: 120%;
  /* 定义缩进 */
  tab-size: 4;
}

h3,
h4,
h5,
h6 {
  margin: 25px 0 10px 0;
  line-height: 100%;
}

.bolder {
  font-weight: bolder;
}

.red {
  color: red;
}

button {
  margin: 5px 5px 5px 10px;
  line-height: 150%;
  width: auto;
  padding: 0 10px;
}
</style>
